<template>
  <div>
    <el-row
      :gutter="20"
      style="margin: 0 auto"
      type="flex"
      justify="space-between"
    >
      <el-col
        :style="openType === '应付' ? 'width:24%' : 'width:33%'"
        class="contentTop"
      >
        <div>
          <el-input
            v-model="name"
            placeholder="请输入费用名称"
            style="width: 100% !important; margin-bottom: 10px"
            @input="searchType"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div style="">
          <el-table
            ref="originTable"
            key="origin"
            :data="changes ? filterList : originTable"
            :row-key="
              (row) => {
                return row.label_name;
              }
            "
            :header-cell-style="{ background: '#f2f5fc' }"
            height="300px"
            @selection-change="handleSelectionChange($event, 'origin')"
          >
            <el-table-column
              :reserve-selection="true"
              type="selection"
              width="50"
            ></el-table-column>
            <el-table-column label="费用名称" prop="label_name">
            </el-table-column>
          </el-table>
        </div>
        <div class="margin10">
          <el-button
            :disabled="!chooseList.length || clickParam !== 'origin'"
            type="primary"
            @click="addMust(1)"
            >设为必收</el-button
          >
          <el-button
            :disabled="!chooseList.length || clickParam !== 'origin'"
            type="success"
            @click="addChoose(1)"
            >设为可选</el-button
          >
          <el-button
            v-if="openType === '应付'"
            :disabled="!chooseList.length || clickParam !== 'origin'"
            type="info"
            @click="addReplace(1)"
            >设为代垫</el-button
          >
        </div>
      </el-col>
      <el-col
        :style="openType === '应付' ? 'width:24%' : 'width:33%'"
        class="contentTop"
      >
        <div>
          <el-input
            v-model="name"
            placeholder="请输入费用名称"
            style="width: 100% !important; margin-bottom: 10px"
            @input="searchName"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div>
          <el-table
            ref="mustTable"
            key="must"
            :data="mustTable"
            :row-key="
              (row) => {
                return row.label_name;
              }
            "
            :header-cell-style="{ background: '#f2f5fc' }"
            height="300px"
            @selection-change="handleSelectionChange($event, 'must')"
          >
            <el-table-column
              :reserve-selection="true"
              type="selection"
              width="50"
            ></el-table-column>
            <el-table-column label="必收费用名称" prop="label_name">
            </el-table-column>
          </el-table>
        </div>
        <div class="margin10">
          <el-button
            :disabled="!chooseList.length || clickParam !== 'must'"
            type="warning"
            @click="cancelEvent(1)"
            >恢复初始</el-button
          >
          <el-button
            :disabled="!chooseList.length || clickParam !== 'must'"
            type="success"
            @click="addChoose(2)"
            >设为可选</el-button
          >
          <el-button
            v-if="openType === '应付'"
            :disabled="!chooseList.length || clickParam !== 'must'"
            type="info"
            @click="addReplace(2)"
            >设为代垫</el-button
          >
        </div>
      </el-col>
      <el-col
        :style="openType === '应付' ? 'width:24%' : 'width:33%'"
        class="contentTop"
      >
        <div>
          <el-input
            v-model="name"
            placeholder="请输入费用名称"
            style="width: 100% !important; margin-bottom: 10px"
            @input="searchName"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div>
          <el-table
            ref="chooseTable"
            key="choose"
            :data="chooseTable"
            :row-key="
              (row) => {
                return row.label_name;
              }
            "
            :header-cell-style="{ background: '#f2f5fc' }"
            height="300px"
            @selection-change="handleSelectionChange($event, 'choose')"
          >
            <el-table-column
              :reserve-selection="true"
              type="selection"
              width="50"
            ></el-table-column>
            <el-table-column label="可选费用名称" prop="label_name">
            </el-table-column>
          </el-table>
        </div>
        <div class="margin10">
          <el-button
            :disabled="!chooseList.length || clickParam !== 'choose'"
            type="warning"
            @click="cancelEvent(2)"
            >恢复初始</el-button
          >
          <el-button
            :disabled="!chooseList.length || clickParam !== 'choose'"
            type="primary"
            @click="addMust(2)"
            >设为必收</el-button
          >
          <el-button
            v-if="openType === '应付'"
            :disabled="!chooseList.length || clickParam !== 'choose'"
            type="info"
            @click="addReplace(3)"
            >设为代垫</el-button
          >
        </div>
      </el-col>
      <el-col
        v-if="openType === '应付'"
        :style="openType === '应付' ? 'width:24%' : 'width:33%'"
        class="contentTop"
      >
        <div>
          <el-input
            v-model="name"
            placeholder="请输入费用名称"
            style="width: 100% !important; margin-bottom: 10px"
            @input="searchName"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div>
          <el-table
            key="replace"
            ref="replaceTable"
            :data="replaceTable"
            :row-key="
              (row) => {
                return row.label_name;
              }
            "
            :header-cell-style="{ background: '#f2f5fc' }"
            height="300px"
            @selection-change="handleSelectionChange($event, 'replace')"
          >
            <el-table-column
              :reserve-selection="true"
              type="selection"
              width="50"
            ></el-table-column>
            <el-table-column label="代垫费用名称" prop="label_name">
            </el-table-column>
          </el-table>
        </div>
        <div class="margin10">
          <el-button
            :disabled="!chooseList.length || clickParam !== 'replace'"
            type="warning"
            @click="cancelEvent(3)"
            >恢复初始</el-button
          >
          <el-button
            :disabled="!chooseList.length || clickParam !== 'replace'"
            type="primary"
            @click="addMust(3)"
            >设为必收</el-button
          >
          <el-button
            :disabled="!chooseList.length || clickParam !== 'replace'"
            type="success"
            @click="addChoose(3)"
            >设为可选</el-button
          >
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  props: {
    openType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      filterList: [],
      changes: false,
      searchName: "",
      name: "",
      customers: [],
      chooseList: [],
      originTable: [
        {
          label_name: "拼车运费",
        },
        {
          label_name: "散货费",
        },
        {
          label_name: "代理运费",
        },
        {
          label_name: "运费",
        },
        {
          label_name: "装卸费",
        },
        {
          label_name: "力资费",
        },
        {
          label_name: "仓储费",
        },
        {
          label_name: "运输费",
        },
      ],
      mustTable: [],
      chooseTable: [],
      replaceTable: [],
    };
  },
  computed: {
    ...mapGetters(["session"]),
  },

  mounted() {},
  methods: {
    searchType(val) {
      if (val === "") {
        this.changes = false;
        return;
      }
      this.changes = true;
      console.log(this.originTable, "originTable");
      this.filterList = this.originTable.filter((item) => {
        return item.label_name.includes(val);
      });
    },
    handleSelectionChange(val, name) {
      if (val.length) {
        this.clickParam = name;
        this.chooseList = val;
        this.clearEffect(val, name);
      }
    },
    clearEffect() {
      switch (this.clickParam) {
        case "origin":
          this.$refs.chooseTable.clearSelection();
          this.$refs.mustTable.clearSelection();
          if (this.openType === "应付") {
            this.$refs.replaceTable.clearSelection();
          }
          break;
        case "must":
          this.$refs.originTable.clearSelection();
          this.$refs.chooseTable.clearSelection();
          if (this.openType === "应付") {
            this.$refs.replaceTable.clearSelection();
          }
          break;
        case "choose":
          this.$refs.originTable.clearSelection();
          this.$refs.mustTable.clearSelection();
          if (this.openType === "应付") {
            this.$refs.replaceTable.clearSelection();
          }
          break;
        case "replace":
          this.$refs.originTable.clearSelection();
          this.$refs.mustTable.clearSelection();
          this.$refs.chooseTable.clearSelection();
          break;
      }
    },
    handleData(list) {
      const tempArr = list.filter((item) => {
        return this.chooseList.every((itema) => {
          return itema.label_name !== item.label_name;
        });
      });
      console.log(tempArr, "tempArr");
      return tempArr;
    },
    addChoose(type) {
      this.chooseTable = this.chooseTable.concat(this.chooseList);
      if (type === 1) {
        if (this.changes) {
          this.filterList = this.handleData(this.filterList);
        }
        this.originTable = this.handleData(this.originTable);
      } else if (type === 2) {
        this.mustTable = this.handleData(this.mustTable);
      } else {
        this.replaceTable = this.handleData(this.replaceTable);
      }
      this.chooseList = [];
    },
    addReplace(type) {
      this.replaceTable = this.replaceTable.concat(this.chooseList);
      if (type === 1) {
        this.originTable = this.handleData(this.originTable);
      } else if (type === 2) {
        this.mustTable = this.handleData(this.mustTable);
      } else {
        this.chooseTable = this.handleData(this.chooseTable);
      }
      this.chooseList = [];
    },
    addMust(type) {
      this.mustTable = this.mustTable.concat(this.chooseList);
      if (type === 1) {
        this.originTable = this.handleData(this.originTable);
      } else if (type === 2) {
        this.chooseTable = this.handleData(this.chooseTable);
      } else {
        this.replaceTable = this.handleData(this.replaceTable);
      }
      this.chooseList = [];
      // 选择必须费用
    },
    cancelEvent(type) {
      this.originTable = this.originTable.concat(this.chooseList);
      if (type === 1) {
        this.mustTable = this.handleData(this.mustTable);
      } else if (type === 2) {
        this.chooseTable = this.handleData(this.chooseTable);
      } else {
        this.replaceTable = this.handleData(this.replaceTable);
      }
      this.chooseList = [];
    },
  },
};
</script>
<style scoped>
.contentTop {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: #fff;
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.contentTop >>> .el-input__inner {
  border-radius: 16px !important;
  border: 1px solid #dcdfe6 !important;
}
.margin10 {
  margin-top: 10px;
  text-align: center;
}
</style>
